<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{margin:0;padding:0}
        img{
            vertical-align: top;
        }
        .main{
            margin:0 auto;
            width:1000px;
            margin-top:10px;

            /*position: static;*/

        }
        .fixed {
            position: fixed;
            top: 0;
            left: 0;
        }
    </style>
    <script src="../../1.代码/Tronke.MyScroll.js"></script>
</head>
<body>
<div class="top" id="top">
    <img src="images/top.png" alt=""/>
</div>
<div id="Q-nav">
    <img src="images/nav.png" alt=""/>
</div>
<div class="main" id="main">
    <img src="images/main.png" alt=""/>
</div>
</body>
</html>

<script>


     var oTop=document.getElementById('top');
     var oNav =document.getElementById('Q-nav');

    window.onload=function () {

            document.onscroll=function () {

                //1.当滚动条 ，滚动到某一个高度的时候，让 nav固定在顶部，
                //2.否则，滚回来的时候， nav 回到原来的位置。


                //1.
                var scrTop=scroll().top;//不可见区域的高度。
                //2.滚动到div1的高度后，nav固定在顶部，
                var topHeight=oTop.offsetHeight;

//                console.log(scrTop);

                if(scrTop>=topHeight){
                    oNav.style.position="fixed";
                    oNav.style.top="0px";
                    //哥们，您走了，我会帮留着高度
                    oTop.style.marginTop=oNav.clientHeight+"px";
                }else{
                    //回去的效果
                    //我打仗回来
                    oNav.style.position="static";
                  //高度就不要了
                    oTop.style.marginTop=0;

                }



            }


    }

</script>